import React,{useState,useImperativeHandle, forwardRef} from 'react';
import {
	Modal,Form,Input
} from 'antd';

function EditModal(props,ref){

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [data,setData] = useState({})
    const [tag,setTag] = useState({})

    useImperativeHandle(ref,()=>({
        showModal:(item,tagData)=>{
            setData(item);
						setTag(tagData)
            setIsModalVisible(true);
        }
    }))

    const handleOk = () => {
        setIsModalVisible(false);
				// console.log(data)
				props.submitCallback(data,tag);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

		const renderArr = [],
			fillters = ['disX','disY','id','length','options'];
		
		for(let k in data){
			const check = fillters.some(v =>v===k);
			if(check) continue;
			renderArr.push({
				key:k,
				val:data[k]
			})
		}
		
		// console.log(renderArr);

    return (
      <Modal title="编辑配置" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form
					name="basic"
					autoComplete="off"
				>
					{renderArr.map((v,index)=>(
						<Form.Item
							key={index}
							label={v.key}
						>
							<Input 
								value={data[v.key]}
								defaultValue={data[v.key]}
                onChange={(e)=>setData({...data,[v.key]:e.target.value})} 
							/>
						</Form.Item>
					))}

				</Form>
      </Modal>
    )
}

export default forwardRef(EditModal);